<template>
  <view class="login-container">
    <!-- 顶部logo -->
    <view class="logo-container">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="app-name">校园通</text>
    </view>

    <!-- 登录表单 -->
    <view class="form-container">
      <up-form :model="form" :rules="rules" ref="loginForm" label-position="top">
        <up-form-item label="账号" prop="username" border-bottom>
          <up-input v-model="form.username" placeholder="请输入账号/手机号/邮箱" clearable prefix-icon="account"></up-input>
        </up-form-item>

        <up-form-item label="密码" prop="password" border-bottom>
          <up-input v-model="form.password" placeholder="请输入密码" password clearable prefix-icon="lock"></up-input>
        </up-form-item>

        <view class="form-options">
          <up-checkbox-group>
            <up-checkbox v-model="form.remember" label="记住密码" size="16"></up-checkbox>
          </up-checkbox-group>

          <!-- <text class="forget-password" @click="navigateToForget">忘记密码?</text> -->
        </view>

        <up-button type="primary" shape="circle" text="登录" :loading="loading" @click="handleLogin"></up-button>
      </up-form>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/stores/user';
import { loginApi } from '@/api/user';

const userStore = useUserStore();

// 表单数据
const form = ref({
  username: 'admin',
  password: '123456',
  remember: false
});

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    // { min: 4, max: 20, message: '账号长度在4到20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    // { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ]
};

// 引用表单
const loginForm = ref();
// 加载状态
const loading = ref(false);
// 是否显示第三方登录
const showThirdLogin = ref(true);

// 初始化检查记住的账号
onMounted(() => {
  const rememberAccount = uni.getStorageSync('rememberAccount');
  if (rememberAccount) {
    form.value.username = rememberAccount.username || '';
    form.value.password = rememberAccount.password || '';
    form.value.remember = true;
  }
});

// 处理登录
const handleLogin = () => {
  loginForm.value.validate().then(async () => {
    const res = await loginApi(form.value);
    console.log(res);
    const token = res.data.token;
    // 存储到本地
    uni.setStorageSync('token', res.data.token);
    // 记住密码处理
    if (form.value.remember) {
      uni.setStorageSync('rememberAccount', {
        username: form.value.username,
        password: form.value.password
      });
    } else {
      uni.removeStorageSync('rememberAccount');
    }
    // 登录成功提示
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    });

    // 跳转到首页
    uni.switchTab({
      url: '/pages/index/index'
    });
  });
};

// 第三方登录
const handleThirdLogin = (type) => {
  uni.showToast({
    title: `正在跳转${type}登录...`,
    icon: 'none'
  });

  // 实际项目中这里调用第三方登录SDK
  // 例如：uni.login({ provider: type })
};

// 跳转到忘记密码页面
const navigateToForget = () => {
  uni.navigateTo({
    url: '/pages/forget-password/index'
  });
};

// 跳转到注册页面
const navigateToRegister = () => {
  uni.navigateTo({
    url: '/pages/register/index'
  });
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  padding: 0 60rpx;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;

  .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80rpx 0 60rpx;

    .logo {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 20rpx;
    }

    .app-name {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .form-container {
    flex: 1;

    :deep(.u-form) {
      .u-form-item {
        padding: 20rpx 0;

        .u-form-item__body {
          padding: 20rpx 0;
        }
      }
    }

    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 30rpx 0 50rpx;

      .forget-password {
        font-size: 26rpx;
        color: #999;
      }
    }

    .u-button {
      height: 90rpx;
      font-size: 32rpx;
    }

    .other-login {
      margin-top: 80rpx;

      .divider {
        display: flex;
        align-items: center;
        margin: 40rpx 0;
        color: #ccc;

        &::before,
        &::after {
          content: '';
          flex: 1;
          height: 1px;
          background-color: #eee;
        }

        .divider-text {
          padding: 0 20rpx;
          font-size: 26rpx;
          color: #999;
        }
      }

      .third-login-icons {
        display: flex;
        justify-content: center;
        gap: 60rpx;

        .icon-item {
          display: flex;
          flex-direction: column;
          align-items: center;

          text {
            font-size: 24rpx;
            color: #666;
            margin-top: 10rpx;
          }
        }
      }
    }

    .register-guide {
      text-align: center;
      margin-top: 40rpx;
      font-size: 26rpx;
      color: #666;

      .register-text {
        color: #2979ff;
        margin-left: 10rpx;
      }
    }
  }
}
</style>
